<template>
  <view class="page-green">
    <!-- Content -->
    <view class="relative mx-4 h-56">
      <image class="h-full w-full rounded-4" src="/static/images/home/banner.png" mode="aspectFit" />
    </view>

    <view class="bg-green-line mx-10 mb-4 flex items-center justify-center">
      <view class="text-lg font-bold">
        <image class="h-3 w-3" src="/static/images/home/circle-g.png" mode="aspectFit" />
        Hi,谢之遥同学
      </view>
      <view class="ml-4 border border-white rounded-xl bg-#d8f9f2 px-2 py-1 text-xs">
        欢迎进入迎新服务站
      </view>
    </view>

    <!-- Welcome Services -->
    <view class="mb-6 px-4">
      <view class="grid grid-cols-2 gap-4">
        <view class="rounded-4 bg-#3ee6c1" @click="navigateTo('guide')">
          <view class="rounded-lt-4 rounded-rt-4 bg-#00E0AE py-2 text-center text-sm text-#ffffff font-medium">
            迎新指南
          </view>
          <view class="flex items-center justify-around p-2">
            <view>
              <view class="text-xs text-white">
                入学安排便捷查
              </view>
              <u-icon
                name="/static/svg/arrow.svg"
                size="24"
              />
            </view>
            <image class="h-13 w-13" src="/static/images/home/book.png" mode="aspectFit" />
          </view>
        </view>
        <view class="rounded-4 bg-#f4da73" @click="navigateTo('requirement')">
          <view class="rounded-lt-4 rounded-rt-4 bg-#F0CD42 py-2 text-center text-sm text-#ffffff font-medium">
            温馨提示
          </view>
          <view class="flex items-center justify-around p-2">
            <view>
              <view class="text-xs text-white">
                入学资料早准备
              </view>
              <u-icon
                name="/static/svg/arrow.svg"
                size="24"
              />
            </view>
            <image class="h-13 w-13" src="/static/images/home/light.png" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>

    <!-- 所有应用 -->
    <view class="bg-gradient mx-4 mb-6 rounded-4 px-4">
      <view class="flex items-center justify-between py-4">
        <view class="bg-title pb-1 font-bold">
          应用服务
        </view>
        <view class="flex items-center justify-center">
          <image class="h-5 w-5" src="/static/images/home/heart.png" mode="aspectFit" />
          智享校园生活
        </view>
      </view>

      <view class="grid grid-cols-2 gap-4 pb-6">
        <template v-for="item in dataList" :key="item.title">
          <view class="flex items-center justify-around rounded-lg bg-#F3FAF8" @click="navigateTo(item.route)">
            <view class="pl-1">
              <text class="mb-1 block text-sm font-medium">
                {{ item.title }}
              </text>
              <text class="text-xs text-gray-500">
                {{ item.subTitle }}
              </text>
            </view>
            <view class="flex-110 h-20 flex basis-0 items-end justify-center">
              <image :src="item.imgUrl" mode="aspectFit" class="border-color h-11 w-11 border border-6 rounded-20 border-solid" />
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

const dataList = ref([
  {
    imgUrl: '/static/images/home/infomation.png',
    title: '信息查询',
    subTitle: '班级宿舍速查',
    route: 'welcomeDetail',
  },
  {
    imgUrl: '/static/images/home/info.png',
    title: '信息采集',
    subTitle: '迎新预报到服务',
    route: 'information',
  },
  {
    imgUrl: '/static/images/home/clubs.png',
    title: '社团介绍',
    subTitle: '缤纷社团风采',
    route: 'clubs',
  },
  {
    imgUrl: '/static/images/home/intrast.png',
    title: '兴趣特长',
    subTitle: '兴趣特长优选',
    route: 'interest',
  },
  {
    imgUrl: '/static/images/home/health.png',
    title: '特殊体质上报',
    subTitle: '特体关注服务',
    route: 'health',
  },
  {
    imgUrl: '/static/images/home/report.png',
    title: '电子报到',
    subTitle: '一键扫码报到',
    route: 'report',
  },
]);
const navigateTo = (page) => {
  const routes = {
    guide: '/pages/biz/welcome/guide',
    requirement: '/pages/biz/welcome/requirement',
    welcomeDetail: '/pages/biz/welcome/detail',
    information: '/pages/biz/information/index',
    clubs: '/pages/biz/clubs/index',
    interest: '/pages/biz/interest/index',
    health: '/pages/biz/health/index',
    report: '/pages/biz/report/index',
    // notice: '/pages/welcome/notice',
    // registration: '/pages/services/registration',
    // info: '/pages/services/info',
    special: '/pages/biz/special/agreement1',
    // walkout: '/pages/services/walkout',
  };

  const url = routes[page];
  if (url) {
    uni.navigateTo({
      url: routes[page],
    });
  }
};
</script>

<style lang="scss" scoped>
  .sys-name{
    width: 80%;
    height:100px;
  }
 .bg-title{
    background: url('@/static/images/home/line-y.png') no-repeat center bottom;
    background-size: 100% 10px;
    text-align: center;
  }
  .bg-gradient {
    background: linear-gradient(to bottom, #cbf3db, #ffffff, #ffffff);
  }
  .bg-green-line{
    background: url('@/static/images/home/line.png') no-repeat center center;
    background-size: auto 100%;

  }
  .border-color{
    border: 5px solid #fafdfc;
  }
</style>
